<style lang="less">
</style>
<template>
    <div class="main page-post">
        <div class="main-header">
            <el-breadcrumb>
                <el-breadcrumb-item :to="{ path: '/tickets' }">票券修改</el-breadcrumb-item>
                <el-breadcrumb-item>{{itemModel.id ? '票券修改' : '票券修改'}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <el-form
            class="main-form"
            label-width="100px"
            :model="itemModel"
            @submit.native.prevent="save()"
        >
            <el-form-item label="票券大类">
                <el-select v-model="itemModel.parent_id">
                    <el-option
                        v-for="item in parents"
                        :label="item.name"
                        :value="item.id"
                        :key="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="票券类型">
                <el-select v-model="itemModel.type_id">
                    <el-option
                        v-for="item in ticketSel"
                        :label="item.name"
                        :value="item.id"
                        :key="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="有效截止时间">
                    <DatePicker type="datetime" v-model="itemModel.end_time" format="yyyy-MM-dd"></DatePicker>
                    <span class="tips" style="margin-left:.6em;color:#999">* 票券可使用截止时间</span>
            </el-form-item>
             <el-form-item>
                <el-button native-type="submit" type="primary" :loading="!itemModel.$resolved">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import ItemController from '../controllers/item';

import TikeketModel from '../models/ticket';
import TypeModel from '../models/type';


export default new ItemController({
    data() {
        return {
            itemModel: new TikeketModel({
                parent_id: 0,
                type_id: 0,
                type: 'special',
                end_time: '',
                ticket_no: '',
            }),
            parents: [],
            ticketSel: [],
        };
    },
    methods: {
        afterLoadModel(model) {
            model.type = 'special';
            return Promise.all([
                // this.loadGrands(),
                this.loadParents(),
                this.loadTickets()
            ]);
        },
        loadParents() {
            return TypeModel.query({
                parent_id: 0
            })
            .$promise
            .then(types => {
                this.parents = types.items;
                this.itemModel.parent_id = types.items[0].id;
            });
        },
        loadTickets(parent_id) {
            return TypeModel.query({
                parent_id: this.itemModel.parent_id,
            })
            .$promise
            .then(types => {
                this.ticketSel = types.items;
                this.itemModel.type_id = types.items[0].id;
            });
        }
    },
    'itemModel.parent_id': {
        deep: true,
        handler(newVal, oladVal) {
            console.log(newVal, oladVal)
            return this.loadTickets(newVal);
        }
    },
});
</script>
